<template>
  <div
    class="progress-bar"
    ref="progressWrap"
    @click="handleClick"
    >
    <div class="inner-progress-bar" ref="progress"></div>
    <div
      class="progress-btn"
      ref="progressBtn"
      @touchstart.prevent="handleTouchStart"
      @touchmove.prevent="handleTouchMove"
      @touchend="handleTouchEnd"
      >
      <div class="inner-btn"></div>
    </div>
  </div>
</template>

<script>
import { prefixStyle } from 'common/js/dom'

const progressBtnWidth = 16 // 按钮宽度

const transform = prefixStyle('transform') // 兼容处理

export default {
  name: 'ProgressBar',
  props: {
    percent: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.touch = {}
  },
  watch: {
    percent (newVal) {
      if (!this.touch.initiated) {
        // console.log('percent is:', newVal)
        // 进度条总宽度
        const barWidth = this.$refs.progressWrap.clientWidth - progressBtnWidth

        // 偏移距离(播放进度宽度)
        const offsetWidth = newVal * barWidth

        this._offset(offsetWidth)
      }
    }
  },
  methods: {
    handleTouchStart (e) {
      this.touch.initiated = true // 开始滑动
      this.touch.startX = e.touches[0].pageX // 初始滑动距离

      // 滑动触发时进度条偏移值
      this.touch.left = this.$refs.progress.clientWidth
      // 进度条总宽度
      this.touch.barWidth = this.$refs.progressWrap.clientWidth - progressBtnWidth
    },
    handleTouchMove (e) {
      if (this.touch.initiated) {
        const deltaX = e.touches[0].pageX - this.touch.startX // 滑动偏移值
        const offsetWidth = deltaX + this.touch.left // 进度条偏移值

        if (offsetWidth >= 0 && offsetWidth <= this.touch.barWidth) {
          this._offset(offsetWidth)
        }
      }
    },
    handleTouchEnd () {
      this.touch.initiated = false // 结束滑动
      this._triggerPercent()
    },
    handleClick (e) {
      const rectLeft = this.$refs.progressWrap.getBoundingClientRect().left
      const offsetWidth = e.pageX - rectLeft // 获取点击的位置距离左侧的距离
      this._offset(offsetWidth)
      this._triggerPercent()
    },
    _triggerPercent () {
      // 获取当前进度条偏移距离比例
      const barWidth = this.$refs.progressWrap.clientWidth - progressBtnWidth
      const clientWidth = this.$refs.progress.clientWidth
      const percent = clientWidth / barWidth

      this.$emit('percentChange', percent)
    },
    _offset (offsetWidth) {
      // 设置进度条宽度
      this.$refs.progress.style.width = offsetWidth + 'px'

      // 设置按钮偏移距离
      this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .progress-bar {
    position: relative
    height: 4px
    background: $color-background-d
    .inner-progress-bar {
      background: $color-theme
      height: 100%
      // width: 10%
    }
    .progress-btn {
      position: absolute
      left: 0
      top: -6px
      width: 16px
      height: 16px
      border-radius: 50%
      background: $color-text
      .inner-btn {
        width: 10px
        height: 10px
        background: $color-theme
        border-radius: 50%
        margin: 0 auto
        margin-top: 3px
      }
    }
  }
</style>
